<template>
  <div>
    <!-- 头部返回按钮 -->
     <div class="header">
          <div class="text" @click="okk">
          <i class="iconfont icon-back"></i>
          <span class="text1">
            <i class="iconfont icon-fanhui"></i>
              收货界面
            </span>
       </div>
   </div>

   <div class="img">
     <img class="img" :src="imageUrl">
   </div>

  <div class="tip-nurse-info">
        <div class="nurse-name">{{mydetail.user_name}}</div>
        <div class="nurse-medic">单号:{{mydetail.my_order}}</div>
   </div>

 <div class="phone-tip">
        <div class="left-phone">{{mydetail.phone}}</div>
        <div class="right-name">电话
          <i class="iconfont icon-dianhua"></i>
        </div>
 </div>

    <div class="confirmButton">
        <mt-button class="but" type="plain" size="large" @click="queding">确定收货</mt-button>
    </div>

  </div>
</template>

<script>
import { Toast } from 'mint-ui'
export default {

  data () {
    return {
      my_order: '',
      mydetail: '',
      imageUrl: this.$store.getters['user/img'] ? this.$store.getters['user/img'] : 'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png'
    }
  },
  created () {
    this.getOrderDetail()
  },
  methods: {
    getOrderDetail () {
      this.my_order = this.$route.params.orderId
      this.$http.get('/getOrderDetail/' + this.my_order).then(res => {
        console.log(res.data)
        if (res.data.code === '1') {
          this.mydetail = res.data.data[0]
        } else {
          Toast({
            message: '获取失败',
            position: 'middle',
            duration: 3000
          })
        }
      })
    },
    queding () {
    //  console.log('dddd')
      // console.log(this.mydetail.id)
      const params = {
        id: this.mydetail.id,
        status: 3
      }
      this.$http.post('/saveResult', params).then(res => {
        console.log(res.data)
        if (res.data.code === '1') {
          Toast({
            message: '操作成功',
            position: 'middle',
            duration: 3000
          })
          this.$router.push({
            name: 'mine'
          })
        } else {
          Toast({
            message: '操作失败',
            position: 'middle',
            duration: 3000
          })
        }
      })
    },
    jujie () {

    },
    okk () {
      this.$router.go(-1)// 返回上一层
    },
    quit () {
      localStorage.removeItem('Token')
      this.$router.push({
        name: 'login'
      })
    },
    oldDetails () {
      this.$router.push({
        name: 'oldDetails'
      })
    }
  }
}
</script>

<style scoped>
.header {
  height: 1.5rem;
  width: 100%;
  background:#96D596;
}
.text{
  padding-top:4%;
  font-size:0.55rem;
  color:white
}
.iconfont{
  font-size: 0.55rem;
}
.confirmButton{
  display: flex;
  justify-content: center;
  width:90%;
  margin: 0.5rem;
  background: #96D596;
  color:azure
}
.confirmButton .but{
  background: #96D596;
}
/* 护工的一个简短介绍 */
.nurse-info{
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom:1px solid #ccc
}
.nurse-info .edit-person-info{
  margin-right: 10%;
  font-size: 0.45rem;
}
.avatar {
    width:2rem;
    height: 2rem;
    border-radius: 50px;
    background: blanchedalmond;
    margin-right: 3%;
}
.left-tip .nurse-name{
  font-size: 0.5rem;
  margin-left:10px;
}
.left-tip .nurse-bg{
  font-size: 0.35rem;
  color: rgb(129, 121, 121);
  margin-left: 10px;
  margin-top:4px
}
.nurse-info .left-tip{
  display: flex;
  justify-content: center;
  align-items: center;
  margin:3% 5% 3% 3%;
}
.img{
  max-height: 280px;
  width:100%;
  text-align: center;
  margin-bottom:10px;
  margin:2%;
  min-width: 90%;
  width: 95%;
}
.tip-nurse-info{
  margin:5%;
  display: flex;
  align-items: center;
  justify-content: space-around;
  border-bottom: 0.02rem solid gray;

}
.tip-nurse-info .nurse-name{
  font-size: 0.6rem;
  font-weight: bold;
  margin-bottom: 3%;
}
.tip-nurse-info .nurse-medic{
  font-size: 0.35rem;
  color: rgb(107, 132, 247);
  margin-bottom: 3%;
}
.phone-tip{
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 0.02rem solid gray;
}
.phone-tip .left-phone{
  margin:5%;
  font-size: 0.5rem;
  font-weight: bold;

}
.phone-tip .right-name{
  margin-right: 5%;
  font-size: 0.35rem;
}
.phone-tip .right-name .iconfont{
  color: rgb(255,108,108);
  font-size: 0.5rem;
  font-weight: bold;
}
.yuding{
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin-top: 3%;
  margin-bottom: 3%;
}
.yuding .left-price{
  font-size: 0.5rem;
  margin-left: 10%;
  color: brown;
}
.yuding .right-but{
  font-size: 0.5rem;
  /* margin-right: 10%; */
  width: 100%;
}
.yuding .delete{
  color: black;
  font-size: 0.35rem;

}
.yuding .right-but{
  vertical-align: top;
  color: #fff;
  /* background: #813f44; */
  background: rgb(236,101,110);
  border-radius: 4px;
  font-size: 14px;
  padding: 2%;
  width: 20%;
  text-align: center;
}
.confirmButton{
  display: flex;
  justify-content: center;
  width:90%;
  margin: 0.5rem;
  background: #96D596;
  color:azure
}
.confirmButton .but{
  background: #96D596;
}

</style>
